$topbar-background: #2c3840;
$topbar-hover-color: lighten($topbar-background, 10%);// The CSS for the Foundation docs is stored in an external codebase:
// https://github.com/zurb/foundation-docs
//
// You can test Sass changes locally by running these commands:
//   git clone https://github.com/zurb/foundation-docs
//   npm link ./foundation-docs
//
// Feel free to submit pull requests to foundation-docs like you would Foundation itself!

$foundation-palette: (
  primary: #7465be,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

@import 'node_modules/foundation-sites/scss/foundation';
@import 'node_modules/motion-ui/src/motion-ui';

@include foundation-everything;
@include motion-ui-transitions;

@import 'node_modules/foundation-docs/scss/foundation-docs';

@import 'code';
@import 'compatibility';
@import 'course-callout';

$topbar-background: #2c3840;
$topbar-hover-color: lighten($topbar-background, 10%);

.dropdown.menu > li.is-dropdown-submenu-parent > a {
  padding-right: 1rem;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  display: none;
}

.docs-newsletter {
  background: #2a2f58;
}

.zurb-footer-top {
  background: #1C1F3A !important;
}

.callout.secondary.tip {
  border: none;
  border-left: 5px solid $primary-color;
}

.marketing-topbar,
.title-bar {
  background: $topbar-background;

  .dropdown.menu a {
    background: $topbar-background;
  }

  .title {
    background: $topbar-background;
  }
}

.dropdown.menu a.button {
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

.is-dropdown-submenu-item a {
  &:hover {
    background: $topbar-hover-color;
  }
}

.marketing-topbar .menu a:hover:not(.button), 
.marketing-topbar .menu a:focus {
  background: $topbar-hover-color;
}

.marketing-topbar .menu .topbar-title a {
  &:hover, 
  &:focus {
    background: $topbar-background;
  }
}

.docs-newsletter {
  padding: 1rem 0;
}

.footer-signup-form {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.zurb-footer-bottom {
  background: $topbar-background;
}

.ad-unit {
  max-width: 250px;
  padding: .5rem;
  background: #2a2f58;
  border-radius: 4px;
}

.ad-unit-title {
  padding: 10px 16px 5px 16px;
  text-align: center;
  color: #fff;
  font-size: 23px;
  font-weight: bold;
  font-family: 'proxima nova', helvetica, arial;
  animation:  ad-title-anim 1.5s 1 ease;
  animation-fill-mode: backwards;
}

.ad-unit-text {
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 0 15px 10px 15px;
  animation:  ad-text-anim 1s 1 ease;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

.ad-unit-button {
  margin-bottom: 0;
  width: 100%;
  box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
  border: 0;
  border-radius: 3px;
  font-weight: bold;
}


@keyframes ad-title-anim {
  0%   { opacity: 0; transform: translateY(50%); }
  100% { opacity: 1; }
}

@keyframes ad-text-anim {
  0%   { opacity: 0; transform: scale(.7, .7); }
  100% { opacity: 1; transform: scale(1, 1);}
}

.youtube {
  background: url("../img/icons/youtube.png") no-repeat center 0;
}
